<template>
	<view id="webgl" class="content"></view>
	<!-- <canvas type="webgl" id="webgl" style="width: 100vw; height: 100vh"></canvas> -->
</template>
 
<script module="three" lang="renderjs">
import { createScopedThreejs } from 'threejs-miniprogram';
import { GLTFLoader } from '@/common/three/examples/jsm/loaders/GLTFLoader.js';
// import { registerGLTFLoader  } from '@/common/threejs-miniprogram/loaders/gltf-loader';
import { OrbitControls } from '@/common/three/examples/jsm/controls/OrbitControls.js';
 
let THREE = null;
let canvas = null;
let renderer = null;
let scene = null;
let camera = null;
let controls = null;

export default {  
  mounted() {
    init();
  },
  methods:{
  }

}  

function init(){
	THREE = require('@/common/three/build/three.module.js')
	const scene = new THREE.Scene();
	const geometry = new THREE.BoxGeometry(100, 100, 100); 
	const material = new THREE.MeshBasicMaterial({
			  color: 0xff0000,//0xff0000设置材质颜色为红色
	}); 
	const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
	//设置网格模型在三维空间中的位置坐标，默认是坐标原点
	mesh.position.set(0,10,0);
	scene.add(mesh);
	
	//let canvas = document.getElementById("webgl")
	let width = window.innerWidth; //窗口宽度
	let height = window.innerHeight; //窗口高度
	let k = width / height; //窗口宽高比
	let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
	//创建相机对象
	let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
	camera.position.set(200, 300, 200); //设置相机位置
	camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
	
	const renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height); //设置渲染区域尺寸
	//执行渲染操作   指定场景、相机作为参数
	function render() {
		renderer.render(scene, camera)
	}
	render();
	document.getElementById("webgl").appendChild(renderer.domElement);
	
	// 添加控制器
	let controls = new OrbitControls(camera, renderer.domElement)
	controls.addEventListener('change', render)
}

window.onresize = function () {
    // 重置渲染器输出画布canvas尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
    // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    camera.updateProjectionMatrix();
};
 
</script>
 
<style></style>